<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html{
        font-size: 100px;
    }
    .chart {
    width: 100%;
    height: 1.25rem;
    overflow: hidden;
}

 .monitoring-main {
    height: 1.25rem;
}

.monitoring-list {
    height: 1.25rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    /* justify-content: space-between; */
}

.monitoring-list .item {
    float: left;
    margin-right: .25rem;
    width: 20%;
}

.monitoring-list .item video {
    
    height: 1.2rem;
}

.monitoring-list .item:last-child {
    margin-right: 0;
}
/* 
 滚动条样式设置  */
.monitoring-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
}

.monitoring-list::-webkit-scrollbar {
    height: 10px;
    background-color: rgba(0, 0, 0, .8);
}

.monitoring-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 2px rgba(81, 167, 255, .3);
    background-color: rgba(81, 167, 255, .8);
} 
</style>
<body>
    <div class="chart">
        <div class="monitoring-main">
            <div class="monitoring-list">
                <div class="item">
                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true"></video>
                </div>
                <div class="item">
                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true"></video>
                </div>
                <div class="item">
                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true" width="100%" height="100%"></video>
                </div>
                <div class="item">
                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true" width="100%" height="100%"></video>
                </div>
            </div>
        </div>
    </div>
</body>
</html>